import * as Cesium from "cesium";
import { createApp, h } from "vue";
import TidePopup from "./yuecengPopup.vue";
// 全局变量记录当前弹窗实例
let currentTideDialog = null;

export default class TideDialog {
  constructor(opts) {
    if (currentTideDialog) {
        currentTideDialog.windowClose();
      }
    const { viewer, position, ...rest } = opts;
    this.viewer = viewer;
    this.position = position._value;
    const { vmInstance } = this.createTideDialog({
      ...rest,
      closeEvent: this.windowClose.bind(this),
    });
    
    this.vmInstance = vmInstance;
    viewer.cesiumWidget.container.appendChild(vmInstance.$el);
    this.addPostRender();
    // 设置为当前弹窗实例
    currentTideDialog = this;
  }

  addPostRender() {
    this.viewer.scene.postRender.addEventListener(this.postRender, this);
  }
  postRender() {
    if (!this.vmInstance?.$el || !this.vmInstance.$el.style) return;
    
    // 固定到右上角位置
    this.vmInstance.$el.style.position = 'fixed';
    this.vmInstance.$el.style.top = '10%';  // 距离顶部20px
    this.vmInstance.$el.style.right = 'auto'; // 距离右侧20px
    this.vmInstance.$el.style.bottom = 'auto'; // 清除之前的bottom设置
    this.vmInstance.$el.style.left = '16%';   // 清除之前的left设置
    
    // 根据相机距离控制显示/隐藏
    const camerPosition = this.viewer.camera.position;
    let height = this.viewer.scene.globe.ellipsoid.cartesianToCartographic(
      camerPosition
    ).height;
    height += this.viewer.scene.globe.ellipsoid.maximumRadius;
    
    if (
      !(Cesium.Cartesian3.distance(camerPosition, this.position) > height) &&
      this.viewer.camera.positionCartographic.height < 50000000
    ) {
      this.vmInstance.$el.style.display = "block";
    } else {
      this.vmInstance.$el.style.display = "none";
    }
}
  // postRender() {
  //   if (!this.vmInstance.$el || !this.vmInstance.$el.style) return;
    
  //   const canvasHeight = this.viewer.scene.canvas.height;
  //   const windowPosition = new Cesium.Cartesian2();
    
  //   Cesium.SceneTransforms.worldToWindowCoordinates(
  //     this.viewer.scene,
  //     this.position,
  //     windowPosition
  //   );
    
  //   this.vmInstance.$el.style.bottom =
  //     canvasHeight - windowPosition.y + 260 + "px";
  //   const elWidth = this.vmInstance.$el.offsetWidth;
  //   this.vmInstance.$el.style.left =
  //     windowPosition.x - elWidth / 2 + 110 + "px";

  //   const camerPosition = this.viewer.camera.position;
  //   let height =
  //     this.viewer.scene.globe.ellipsoid.cartesianToCartographic(
  //       camerPosition
  //     ).height;
  //   height += this.viewer.scene.globe.ellipsoid.maximumRadius;
    
  //   if (
  //     !(Cesium.Cartesian3.distance(camerPosition, this.position) > height) &&
  //     this.viewer.camera.positionCartographic.height < 50000000
  //   ) {
  //     this.vmInstance.$el.style.display = "block";
  //   } else {
  //     this.vmInstance.$el.style.display = "none";
  //   }
  // }

  windowClose() {
    if (this.vmInstance) {
      this.vmInstance.$el.remove();
    }
    this.viewer.scene.postRender.removeEventListener(this.postRender, this);
     // 如果是当前实例则清空
     if (currentTideDialog === this) {
        currentTideDialog = null;
      }
  }

  createTideDialog(opts) {
    const app = createApp({
      render() {
        return h(
          TidePopup,
          {
            ...opts,
          }
        );
      },
    });

    const parentNode = document.createElement("div");
    const instance = app.mount(parentNode);
    document.body.appendChild(parentNode);

    return {
      vmInstance: instance,
    };
  }
}